<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--02: 引入react 核心文件   -->
    <script src="../js/react.js"></script>
    <script src="../js/react-dom.js"></script>
    <!--
         引入babel.js 文件
        作用:将es6 或者jsx语法编译成浏览器可以识别的es5的语法
    -->
    <script src="../js/babel.js"></script>
</head>

<body>
    <!--01: 创建一个dom 容器 根节点  -->
    <div id="root">

    </div>
</body>

</html>
<script type="text/babel">
    // 获取页面韩中的根节点 root
    const rootDOM = document.querySelector('#root');
    // 创建一个react 实例对象
    const root = ReactDOM.createRoot(rootDOM);
    // console.log('ReactDOM', ReactDOM)
    // console.log('root', root)

    // 方式1: 使用root 实例上的render方法渲染dom节点
    // root.render(React.createElement('div', { id: 'box' }, '我是2302班级的学生'))
    // root.render(React.createElement('div', { id: 'box' }, React.createElement('p', {}, '我是p元素')))

    //方式2: 将上述render 方法中的参数写法换成jsx 结构
    //注意:react 中类名只能使用className , class 是关键件(定义类组件的关键字)
    root.render(
        <div id='box' className="box1">
            <p>使用jsx语法</p>
        </div>
    )

</script>